<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>教师信息</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/css/layui.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.7.6/layui.js"></script>
</head>
<body>
<div class="layui-container">
    <h1>教师信息列表</h1>

    <!-- 查询按钮 -->
    <button class="layui-btn layui-btn-primary" onclick="loadStudents()">通过 AJAX 显示数据</button>

    <!-- 查询输入框 -->
    <input type="text" id="search-name" placeholder="请输入姓名" class="layui-input" style="width: 200px; display: inline-block;">
    <button class="layui-btn layui-btn-danger" onclick="searchStudents()">按姓名查询</button>

    <button class="layui-btn layui-btn-normal" onclick="addStudent()">添加教师</button>

    <table class="layui-table" id="student-table">
        <thead>
        <tr>
            <th>ID</th>
            <th>工号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>专业</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="student-body">
        <!-- 数据通过AJAX渲染 -->
        </tbody>
    </table>

    <!-- 通过AJAX显示数据的区域 -->
    <div id="ajax-content"></div>
</div>

<!-- 添加/编辑教师的弹窗 -->
<div id="student-form" class="layui-form" style="display:none;">
    <form class="layui-form" id="form-student">
        <input type="hidden" id="student-id">
        <div class="layui-form-item">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-block">
                <input type="text" id="studentNumber" name="studentNumber" required lay-verify="required" placeholder="请输入工号" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input type="text" id="studentName" name="studentName" required lay-verify="required" placeholder="请输入姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">年龄</label>
            <div class="layui-input-block">
                <input type="number" id="studentAge" name="studentAge" required lay-verify="required" placeholder="请输入年龄" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">专业</label>
            <div class="layui-input-block">
                <input type="text" id="studentMajor" name="studentMajor" required lay-verify="required" placeholder="请输入专业" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="button" class="layui-btn" onclick="saveStudent()">保存</button>
                <button type="button" class="layui-btn layui-btn-primary" onclick="closeForm()">取消</button>
            </div>
        </div>
    </form>
</div>

<script src="/js/student.js"></script>
</body>
</html>
